<template>
    <div class="shuzisp-box">
        <div class="shuzisp-box-left">
            <div class="shuzisp-left-cut-box">
                <div class="imgvdaobox">
                    <video-box v-if="dtData.videoFileUrls && dtData.videoFileUrls.length>0"/>
                    <audio-box v-else-if="dtData.musicFileUrls && dtData.musicFileUrls.length>0"/>
                    <img-box v-else-if="dtData.headImageUrls && dtData.headImageUrls.length>0" :imgs='dtData.headImageUrls'/>
                </div>
                <div class="arbtnbox">
                    <my-button :styleType="2" @click="openAR">AR</my-button>
                </div>
            </div>
        </div>
        <div class="shuzisp-box-right">
            <div class="title">{{dtData.title}}</div>
            <div class="introduce">{{dtData.subtitle}}</div>
            <div class="specbox">
                <span>颜色 | 卡其</span>
                <span>quantity × 1</span>
            </div>
            <div class="price" v-if="dtData.payDto">
                <span> <img src="/images/bicon1.png" alt=""> </span>
                <em>{{dtData.payDto.totalAmount.decimalTwoString}}</em>
            </div>
            <div class="shippingMethods">
                <h5 class="title2" v-t="'collection.title10'">Shipping Methods</h5>
                <p class="txt" v-t="'collection.title11'">Spot, delivery within 48 hours after payment</p>
            </div>
            <div class="wuliu-status" v-if="dtData.order">
                <h5 class="title2">
                    {{title12}}
                    <a v-if="dtData.order.logisticsType==1">State <i class="iconfont icon-jiantouyou"></i></a>
                </h5>
                <p  v-if="dtData.order.logisticsType==2" class="txt" v-t="'collection.title13'">Waiting For Self Collection</p>
            </div>
            <div class="khxinxi" v-if="dtData.order">
                <div class="xxitem">
                    <label v-t="'collection.title14'">Receiver：</label>
                    <p>{{dtData.order.shippingName || '--'}}</p>
                </div>
                <div class="xxitem">
                    <label v-t="'collection.title15'">Contact Information：</label>
                    <p>{{dtData.order.shippingPhone || '--'}}</p>
                </div>
                <div class="xxitem" v-if="dtData.order.logisticsType==1">
                    <label v-t="'collection.title16'">Receiving Address：</label>
                    <p>{{dtData.order.shippingAddress}}</p>
                </div>
                <div class="xxitem" v-else>
                    <label v-t="'collection.title17'">Pick Up Point：</label>
                    <p>{{dtData.order.logisticsSelfAddress}}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import Title from '@/components/title.vue'
import twoTitle from '@/components/twoTitle.vue'
import myButton from '@/components/myButton.vue'
import myDailog from '@/components/myDailog.vue' 
import audioBox from "@/components/audioBox.vue";
import videoBox from '@/components/videoBox.vue'
import imgBox from '@/components/imgBox.vue'
import { toast,H5CallAPPFuction } from '@/utils/common'
import { useI18n } from 'vue-i18n'

export default {
    components:{
       Title,
       twoTitle,
       myDailog,
       myButton,
       audioBox,
       videoBox,
       imgBox
    },
    props:{
        detail:Object,
        id:Number
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()

        const state = reactive({
            showFlag:false,
            showFlag2:false,
            showFlag3:false,
            showtype:1, // 1显示出售方式弹窗，2显示一口价弹窗，3显示一口价授权弹窗，4显示拍卖弹窗，5显示成功弹窗，
            hbtypes:[],
            auStartTime:'2021-01-02 09:40',
            auEndTime:'',
            dtData:{},
            title12:t('collection.title12')
        })

        onMounted(()=>{
            if(props.id){
                store.dispatch('collection/get_number_goods_detail',{
                    orderId:props.id
                }).then(res=>{
                    state.dtData = res.data
                    store.commit('shop/set_detail',res.data) // 这里是为了在audioBox，videoBox获取音频视频文件
                })
            }
        })

        const openAR = ()=>{
            let appParams = {
                type:0,
                isLandmark:false,
                goodsInfo:state.dtData
            }
            console.log("appParams:",appParams)
            try {
                // 拍卖出价处理: 调用app的auctionBid方法，传入参数交由app处理，H5只接受处理结果（tradeResults方法接收）
                H5CallAPPFuction('showArView',JSON.stringify(appParams)) 
            } catch (error) {
                toast('调用app失败')
            }
        }

        return{
            ...toRefs(state),
            openAR
        }
    }
}
</script>

<style lang="scss" scoped>
    .shuzisp-box{
        display: flex;
        width: 100%;
        height: 100%;
        line-height: normal;
        font-size: 28px;
        font-weight: 500;
        color: #FFFFFF;
        overflow: hidden;
        overflow-x: auto;
        padding: 20px;
        .shuzisp-box-left{
            width: 650px;
            .shuzisp-left-cut-box{
                display: flex;
                flex-flow: column;
                width: 100%;
                height: 100%;
                max-height: 620px;
                //background: rgba(0,0,0,0.5);
                // border-bottom-left-radius:50px ;
                // border-top-right-radius:50px ;
                overflow: hidden;
                padding: 30px;
                background:linear-gradient(45deg,transparent 20px, rgba(0,0,0,0.5) 0) bottom left,
                linear-gradient(-135deg,transparent 20px, rgba(0,0,0,0.5) 0) top right;
                background-size: 50% 100% !important;
                background-repeat: no-repeat !important;
                .imgvdaobox{
                    flex: 1;
                    width: 100%;
                }
                .arbtnbox{
                    width: 200px;
                    height: 60px;
                    margin: 20px auto 0 auto;
                }
            }
        }
        .shuzisp-box-right{
            flex: 1;
            padding: 0 0 30px 30px;
            font-family: Poppins-Medium, Poppins;
            font-weight: 500;
            color: #FFFFFF;
            line-height: normal;
            font-size: 22px;
            height: 100%;
            overflow: hidden;
            overflow-y: auto;
            .title{
                font-family: Poppins-SemiBold, Poppins;
                font-weight: 600;
                color: #FFFFFF;
                font-size: 28px;
            }
            .introduce{
                padding: 10px 0 0 0;
            }
            .specbox{
                display: flex;
                padding: 20px 0 0 0;
                span{
                    height: 50px;
                    line-height: 50px;
                    padding: 0 20px;
                    //background: rgba(12,132,217,0.5);
                    font-size: 22px;
                    background:linear-gradient(45deg,transparent 8px, rgba(12,132,217,0.5) 0) bottom left,
                    linear-gradient(-135deg,transparent 8px, rgba(12,132,217,0.5) 0) top right;
                    background-size: 50% 100%;
                    background-repeat: no-repeat;
                    &+span{
                        margin: 0 0 0 20px;
                    }
                }
            }
            .price{
                display: flex;
                padding:10px 0 10px 20px;
                margin: 30px 0 0 0;
                align-items: center;
                background: url(/images/flowRanking/typebg2.png) left top no-repeat;
                background-size: auto 100%;
                span{
                    img{
                        display: block;
                        width: 20px;
                    }
                }
                em{
                    font-style: normal;
                    font-size: 30px;
                    padding: 0 0 0 10px;
                }
            }
            .title2{
                font-size: 28px;
                font-family: Poppins-SemiBold, Poppins;
                font-weight: 600;
                color: #FFFFFF;
                background-clip: text;
                -webkit-background-clip: text;
            }
            .txt{
                font-size: 22px;
                padding: 10px 0 0 0;
            }
            .shippingMethods{
                padding: 20px 0 0 0;
                
            }
            .wuliu-status{
                //display: flex;
                padding: 14px 0 0 0;
                .title2{
                    display: flex;
                }
                a{
                    display: flex;
                    align-items: center;
                    font-size: 26px;
                    color: #82FEF4;
                    margin: 0 0 0 15px;
                    //text-decoration: underline;
                    i{
                        font-size: 16px;
                    }
                }
            }
            .khxinxi{
                background: rgba(26,117,251,0.9);
                opacity: 1;
                border: 1px solid rgba(103,248,255,0.5);
                margin: 20px 0 0 0;
                padding: 30px;
                .xxitem{
                    &+.xxitem{
                        margin-top: 16px;
                    }
                }
                label{
                    float: left;
                    height: 30px;
                    font-size: 22px;
                    font-family: Poppins-SemiBold, Poppins;
                    font-weight: 600;
                    color: #FFFFFF;
                }
                p{
                    font-size: 22px;
                    color: #F2FFFF;
                }
            }
        }
    }

    
    
</style>
